<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>productDetails</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/Navigation.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
</head>
<body>
    <div class="topTitle ">首页</div>
    <!-- 轮播图 -->
        <div class="swiper-container banner_swiper1">
            <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/mountain.jpg"/></div>
            <div class="swiper-slide"><img src="images/mountain1.jpg"></div>
            <div class="swiper-slide"><img src="images/mountain2.jpg"></div>
            <div class="swiper-slide"><img src="images/mountain3.jpg"></div>
            <div class="swiper-slide"><img src="images/mountain4.jpg"></div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    <!-- 跑马灯广告 -->
    <div class="advertisement">
        <span>平台公告</span>
        <div class="line">|</div>
        <marquee behavior="scroll">我来回滚动我来回滚动</marquee> 
    </div>
    <!-- 滑动轮播 -->
    <div id="box">
        <div class="swiper-container banner_swiper2">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/mountain.jpg"/></div>
                <div class="swiper-slide"><img src="images/mountain1.jpg"></div>
                <div class="swiper-slide"><img src="images/mountain2.jpg"></div>
                <div class="swiper-slide"><img src="images/mountain3.jpg"></div>
                <div class="swiper-slide"><img src="images/mountain4.jpg"></div>
                <div class="swiper-slide"><img src="images/mountain.jpg"/></div>
                <div class="swiper-slide"><img src="images/mountain1.jpg"></div>
                <div class="swiper-slide"><img src="images/mountain2.jpg"></div>
            </div>
            <!--如果你需要分页-->
            <div class="swiper-pagination" id="swiper-pagination"></div>
        </div>
    </div>
    <div class="mainBox">
        <p>艺术咖</p>
        <div class="art">
            <img src="images/mountain.jpg" class="artLeft"/>
            <div class="artRight">
                <img src="images/mountain1.jpg"/>
                <img src="images/mountain2.jpg"/>
            </div>
        </div>
        <p>最新资讯</p>
        <div class="information">
            <div class="newsDetail">
                <img src="images/mountain1.jpg"/>
                <div>
                    <p>新闻标题</p>
                    <p>2020-6-10</p>
                </div>
            </div>
            <div class="newsDetail">
                <img src="images/mountain1.jpg"/>
                <div>
                    <p>新闻标题</p>
                    <p>2020-6-10</p>
                </div>
            </div>
            <div class="newsDetail">
                <img src="images/mountain1.jpg"/>
                <div>
                    <p>新闻标题</p>
                    <p>2020-6-10</p>
                </div>
            </div>
        </div>
    </div>
    <div class="space"></div>
    <!-- 导航栏 -->
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <div class="nav-item home active">
                <span class="glyphicon glyphicon-home"><span>
                <div>首页</div>
            </div>
            <div class="nav-item shoppingMall">
                <span class="glyphicon glyphicon-shopping-cart"><span>
                <div>商城</div>
            </div>
            <div class="nav-item order">
                <span class="glyphicon glyphicon-list"><span>
                <div>订单</div>
            </div>
            <div class="nav-item mine">
                <span class="glyphicon glyphicon-user"><span>
                <div>我</div>
            </div>
        </div>
    </nav>
</body>
<script>
    $(document).ready(function () {
        // 轮播图
        var mySwiper = new Swiper ('.banner_swiper1', {
            loop : true,
            autoplay:{disableOnInteraction : false},
            //小圆点
            pagination: {
                el: '.swiper-pagination',
            }
        });
        // 滑动轮播
        var swiper = new Swiper('.banner_swiper2', {
            loop : true,
            // 一行显示slider的个数
            slidesPerView: 4,
            // 定义slides的数量多少为一组
            slidesPerGroup: 4,
        
            // 分页
            pagination: {
                el: '#swiper-pagination',
        
                // 设为true, 点击分页器的指示点分页器会控制Swiper切换
                clickable: true,
            }
        });

        $('.container').on('click', '.nav-item', function() {
                const $this = $(this)
                const index = $this.index()

                $this.addClass('active').siblings().removeClass('active')
                
                switch(index) {
                    case 0:
                        location.href='index.html';
                        break
                    case 1:
                        location.href='rushBuy.html';
                        break
                    case 2:
                        location.href='order.html';
                        break
                    case 3:
                        location.href='../personalCenter/personalCenter.html';
                        break

                }
            })
    });
</script>
</html>